
<template>
  <div class="innerBody">


    <!-- <div class="row">
        <span class="tit">通知标题：</span>
        <span class="data">{{ selectData.noticeTitle }}</span>
      </div>

      <div class="row">
        <div class="col">
          <span class="tit">通知等级：</span>
          <span class="data" v-if="selectData.noticeLv == 1">普通</span>
          <span class="data" v-if="selectData.noticeLv == 2">重要</span>
          <span class="data" v-if="selectData.noticeLv == 3" style="color: red;">紧急</span>
        </div>
        <div class="col" style="margin-left: 180px;">
          <span class="tit">通知人员：</span>
          <span class="data">{{ selectData.orgContact }}</span>
        </div>

      </div>

      <div class="row">
        <span class="tit">文件状态：</span>
        <span class="data">{{ selectData.noticeReplyType == 1 ? '存在' : '不存在' }}</span>
      </div>

      <div class="row">
        <span class="tit">回复时间：</span>
        <span class="data">{{ common.timeFormatting(new Date(selectData.noticeEndTime), 'yyyy-MM-dd hh:mm:ss') }}</span>
      </div>

      <div class="row">
        <span class="tit"> 经营企业：</span>

      </div> -->

    <tableDataShow :tableDataProp="selectData" />


    <div class="sendOrgNoticeDetailsTable">
      <table>
        <tr>
          <td>单位名称</td>
          <td>已读时间</td>
          <td>回复时间</td>
          <td>回复内容</td>
          <td>状态</td>
          <td>文件 </td>


        </tr>

        <tr v-for="(item, index) in sonList" :key="index">
          <td>{{ item.deptName }}</td>
          <td>{{ item.readTime }}</td>
          <td>{{ item.replyTime }}</td>
          <td v-html="item.replyContext"> </td>
          <td v-if="item.noticeReplyType == 1">{{ item.noticeReplyState == '1' ? '已回复' : '未回复' }} / {{ item.noticeReadState
            == 1 ? '已读' : '未读' }}</td>
          <td v-else>不用回复</td>
          <td>
           
            <a v-if="item.replyFile != undefined" :href="apiUrl.imgUrl + item.replyFile" target="_blank">查看</a>
            <sapn v-else>无</sapn>

          </td>
        </tr>
      </table>
    </div>

  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter, useRoute } from "vue-router";
import common from "../../api/common"
import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../components/table/index.vue";
import tableDataShow from "./tableDataShow.vue";

//reactive
export default defineComponent({
  name: '_wz_sendNoticeDetails',//组件名称
  components: {
    wzTbale, tableDataShow
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    let sonList = ref([])

    const state = reactive({
      formDetailsData: {},//


    });





    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      $axios.post(apiUrl.noticeOrgMessageNoticeOrgMessageRecordPageList, { noticeUuid: props.selectData.uuid }).then((res) => {  //
        console.log(res)
        if (res.data.code == 0) {
          sonList.value = res.data.data

        } else {
          // $ViewUIPlus.Message.error('保存失败');
        }

      })
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
      common,
      sonList
    }
  }
})


</script>
<style lang="less">
._wz_sendNoticeDetails {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }
}


.innerBody {
  .row {
    margin-top: 10px;
    font-size: 20px;
    overflow: hidden;

    .col {
      float: left;

    }

    .tit {
      // font-weight: 600;
      display: inline-block;
      width: 100px;
      // text-align: center;


    }

  }
}


.sendOrgNoticeDetailsTable {
  padding: 10px;

  table {

    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }
}
</style>
